<script setup lang="ts">
import router from "@/router";
import {useRoute} from "vue-router";
import {useUserStore} from "@/store/user";
import {onMounted, PropType, ref} from "vue";
import {favourStatus, getBlog, getCommentList, onComment, thumbStatus, toFavour, toThumb} from "@/api/blog";
import BlogCommentCard from "@/components/BlogCommentCard.vue";
import {Toast} from "vant";

const route = useRoute()
const user = useUserStore()
const isFollowing = ref(false) // 关注状态

const toggleFollow = () => {
  isFollowing.value = !isFollowing.value
  // 这里可以添加实际的关注/取消关注API调用
}

const blog = ref({
  title: '',
  content: '',
  thumbNum: 0,
  favourNum: 0
})
const comments = ref({
  nickname: '',
  avatar: '',
  content: ''
})

const commentText = ref('')
const submitComment = async () => {
  if (commentText.value.trim() === '') {
    return
  }
  await onComment(route.params.id, user.id, commentText.value)
  comments.value.push({
    nickname: user.nickname,
    avatar: user.avatar,
    content: commentText.value
  })
  commentText.value = ''
  Toast("评论成功")
}

const isThumb = ref(false)
const isFavour = ref(false)
const onThumb = async () => {
  isThumb.value = !isThumb.value
  console.log("isThumb.value", isThumb.value)
  await toThumb(parseInt(route.params.id), user.id)
}
const onFavour = async () => {
  isFavour.value = !isFavour.value
  await toFavour(parseInt(route.params.id), user.id)
}

onMounted(async () => {
  console.log(route.params.id)
  blog.value = await getBlog(route.params.id)
  comments.value = await getCommentList(route.params.id)
  isThumb.value=await thumbStatus(parseInt(route.params.id), user.id)
  isFavour.value=await favourStatus(parseInt(route.params.id), user.id)



})
</script>

<template>
  <van-nav-bar
      :title="blog.title"
      left-arrow
      @click-left="router.back()"
  />
  <div class="user-top">
    <div class="user-profile-top">
      <van-image
          round
          width="5.5rem"
          height="5.5rem"
          :src="user.avatar"
          style="margin-top: 15px; margin-left: 15px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);"
      />
      <div class="user-profile">
        <div class="username-container">
          <h3>{{ user.nickname }}</h3>
          <van-button
              size="mini"
              :type="isFollowing ? 'default' : 'primary'"
              @click="toggleFollow"
              class="follow-btn"
          >
            {{ isFollowing ? '已关注' : '+ 关注' }}
          </van-button>
        </div>
        <van-space wrap v-for="tag in user.tags">
          <van-tag color="#ffe1e1" text-color="#ad0000" style="margin-right: 4px">
            {{ tag }}
          </van-tag>
        </van-space>
      </div>
    </div>

    <div class="user-profile-bottom">
      <div class="user-profile-bottom-container">
        <span class="data">{{ user.postCount }}</span>
        <span class="data-text">博客</span>
      </div>
      <div class="user-profile-bottom-container">
        <span class="data">{{ user.fanCount }}</span>
        <span class="data-text">粉丝</span>
      </div>
      <div class="user-profile-bottom-container">
        <span class="data">{{ user.postTotalView }}</span>
        <span class="data-text">浏览量</span>
      </div>
      <!--      <div class="user-profile-bottom-container">-->
      <!--        <span class="data">{{ user.fanCount }}</span>-->
      <!--        <span class="data-text">粉丝</span>-->
      <!--      </div>-->
    </div>
  </div>

  <div class="content" style="margin: 16px 0">
    {{ blog.content }}
  </div>
  <van-divider>评论区</van-divider>

  <BlogCommentCard v-for="comment in comments" :comment="comment"/>
  <div class="blank" style="margin-top: 50px"></div>

  <div class="interaction-bar">
    <div class="comment-input-container">
      <input
          v-model="commentText"
          type="text"
          placeholder="输入评论..."
          class="comment-input"
          @keyup.enter="submitComment"
      >
      <button @click="submitComment" class="comment-button">评论</button>
    </div>

    <div class="interaction-icons">
      <div class="icon-container" @click="onThumb">
        <van-icon
            :name="isThumb ? 'like' : 'like-o'"
            size="20"
            :color="isThumb ? 'red' : ''"
        />
        <span class="count-badge">{{ blog.thumbNum }}</span>
      </div>

      <div class="icon-container" @click="onFavour">
        <van-icon
            :name="isFavour ? 'star' : 'star-o'"
            size="20"
            :color="isFavour ? 'orange' : ''"
        />
        <span class="count-badge">{{ blog.favourNum }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.user-top {
  width: 90%;
  height: 180px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

.user-profile-top {
  display: flex;
}

.user-profile {
  margin-top: 10px;
  margin-left: 10px;
  background: white;
  width: 216px;
  height: 100px;
}

.username-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}

.follow-btn {
  margin-left: 10px;
  min-width: 60px;
}

.user-profile-bottom {
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: space-around;
}

.data {
  font-size: 20px;
}

.data-text {
  font-size: 12px;
  color: darkgrey;
}

.user-profile-bottom-container {
  width: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.interaction-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background-color: white;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.comment-input-container {
  display: flex;
  flex: 1;
  margin-right: 15px;
}

.comment-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #eee;
  border-radius: 20px;
  outline: none;
  font-size: 14px;
}

.comment-button {
  margin-left: 10px;
  padding: 0 15px;
  background-color: #1989fa;
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  width: 60px;
}

.interaction-icons {
  display: flex;
  align-items: center;
}

.icon-container {
  position: relative;
  margin-left: 5px;
  cursor: pointer;
}

.count-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: red;
  color: white;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
